<template>
  <!-- 新房详情    二手房房详情-->
  <div class="box">
    <heads></heads>
    <tools></tools>
    <div class="tit">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <div @click="toPush(2, 2)" style="color: #64b6a8; cursor: pointer"
          v-if="tHouseInfo.transactionType == 2 && tHouseInfo.newOld == 2">
          二手房
        </div>
        <div @click="toPush(2, 2)" v-else style="cursor: pointer">二手房</div>
        <div @click="toPush(2, 1)" style="color: #64b6a8; cursor: pointer"
          v-if="tHouseInfo.transactionType == 2 && tHouseInfo.newOld == 1">
          新房
        </div>
        <div @click="toPush(2, 1)" v-else style="cursor: pointer">新房</div>
        <!-- <div @click="toPush(1,0)" style="color:#64b6a8;" v-if="tHouseInfo.transactionType==1">租房</div> -->
        <div @click="toPush(1, 0)" style="cursor: pointer">租房</div>
        <div class="sousuo">
          <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入区域小区名称开始找房" />
          <p class="el-icon-search" @click="search"></p>
        </div>
      </div>
    </div>
    <!-- style="display: flex;justify-content: space-between;align-items: center;" -->
    <div class="particulars">
      <template v-if="doorSeen">
        <bbczDoorSeen :createdId="userInfo.id" @close="doorSeen = false" :businessType="1" :uid="$route.query.id"></bbczDoorSeen>
      </template>

      <div class="tu">
        <div class="datu" v-if="Img.type != 'video'">
          <el-image style="width: 600px; height: 400px" :preview-src-list="previewList" :src="Img.url" fit="cover" />
          <div class="zuo el-icon-arrow-left" @click="cutImg(0)"></div>
          <div class="you el-icon-arrow-right" @click="cutImg(1)"></div>
        </div>
        <div class="datu" v-else>
          <video controls autoplay muted width="600" height="400" :src="this.$img + tHouseInfo.houseVideo"></video>
        </div>
        <div class="xiaotu" @click="buttonPlay(1)" v-if="tHouseInfo.houseVideo != '' && tHouseInfo.houseVideo">
          <!-- <img src="../../assets/2.jpg" /> -->
          <video style="object-fit: cover" width="180" height="120" :src="this.$img + tHouseInfo.houseVideo"></video>
          <p :style="Img.type == 'video'
            ? 'background-color:#64B6A8;opacity: 1;top:-33px;'
            : ''
            ">
            视频
          </p>
          <img style="width: 35px; height: 35px; position: relative; top: -110px" src="../../assets/bf.png" />
        </div>
        <div class="xiaotu" @click="buttonPlay(2)">
          <img v-if="Img.type == 'homeImg'" :src="Img.url" />
          <img v-else :src="this.$img + homeImgList[homeImgList.length - 1]" />
          <p :style="Img.type == 'homeImg'
            ? 'background-color:#64B6A8;opacity: 1;'
            : ''
            ">
            图片
          </p>
        </div>
        <div class="xiaotu" @click="buttonPlay(3)" v-if="[1, 4, 5, 6].indexOf(housetype) != -1 && tHouseInfo.type != 6">
          <img v-if="Img.type == 'houseImgList'" :src="Img.url" />
          <img v-else :src="this.$img + houseImgList[0]" />
          <p :style="Img.type == 'houseImgList'
            ? 'background-color:#64B6A8;opacity: 1;'
            : ''
            ">
            户型
          </p>
        </div>
      </div>
      <div class="wenz">
        <info-number :infoId="tHouseInfo.id" />
        <div style="position: relative">
          <el-tooltip class="item" effect="dark" :content="tHouseInfo.title" placement="top-start">
            <div class="name" style="width: 360px">
              {{ tHouseInfo.title }}
            </div>
          </el-tooltip>
          <div class="jubao" style="right: 0">
            <collect :type="1" :bid="$route.query.id" style="margin-right: 10px"></collect>
            <!-- <img src="../../assets/ju.png" />
          <p>举报</p> -->

            <div style="margin-right: 10px;margin-top: 10px; display: flex;justify-content: flex-end;">
              <div @click="doorSeenClick()" style="
                  width: 60px;
                  text-align: center;
                  margin-left: 20px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                ">
                <div style="
                    width: 30px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                  ">
                  <img src="../../assets/bbcz/xqsmkg01.png" style="
                      cursor: pointer;
                      width: 22px;
                      height: 22px;
                      margin-top: 6px;
                    " />
                </div>
                <p v-show="!smkg_chage" style="font-size: 14px">上门看看</p>
                <p v-show="smkg_chage" style="font-size: 14px">上门看过</p>
              </div>
              <div @click.stop="jubaoClick" style="
                  width: 60px;
                  text-align: center;
                  margin-left: 20px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                ">
                <img src="../../assets/ju.png" />
                <p style="font-size: 14px">举报</p>
              </div>
            </div>
          </div>
        </div>
        <div class="qian">
          <div class="p">{{ tHouseInfo.price }}万</div>
          <div>
            {{ ((tHouseInfo.price * 10000) / tHouseInfo.area).toFixed(2) }}元/㎡
          </div>

          <!-- <div style="margin-right: 10px; display: flex">
            <div @click="doorSeenClick()" style="
                width: 60px;
                text-align: center;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              ">
              <div style="
                  width: 30px;
                  height: 30px;
                  display: flex;
                  justify-content: center;
                ">
                <img src="../../assets/bbcz/xqsmkg01.png" style="
                    cursor: pointer;
                    width: 22px;
                    height: 22px;
                    margin-top: 6px;
                  " />
              </div>
              <p v-show="!smkg_chage" style="font-size: 14px">上门看看</p>
              <p v-show="smkg_chage" style="font-size: 14px">上门看过</p>
            </div>
            <div @click.stop="jubaoClick" style="
                width: 60px;
                text-align: center;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              ">
              <img src="../../assets/ju.png" />
              <p style="font-size: 14px">举报</p>
            </div>
          </div> -->
        </div>
        <div class="huxin">
          <div style="margin-right: 140px" v-if="[1].indexOf(housetype) != -1">
            <p class="p1">{{ tHouseInfo.houseType }}</p>
            <p class="p2">户型</p>
          </div>
          <div>
            <p class="p1">{{ tHouseInfo.area }}㎡</p>
            <p class="p2">面积</p>
          </div>
        </div>
        <div class="diz">
          <div v-if="[1].indexOf(housetype) != -1">
            <span>小区名称：{{ tHouseInfo.cellName }}</span>
          </div>
          <div style="margin-bottom: 0px">
            所在区域：{{ tHouseInfo.region }}
          </div>
          <div style="margin-bottom: 0px">地址：{{ tHouseInfo.address }}</div>
        </div>
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <div>
            <div class="mingpai weigui-wrap">
              <!--  v-if="weig" @click="weigui" -->
              <div class="weigui" v-if="weig" @click="weigui">
                <img class="img" src="@/assets/v3/new-weigui.png" />

                <p>该用户有{{ Count }}条违规信息！</p>
                <div>查看详情</div>
              </div>
              <div class="flex flex-al-center">
                <img style="border-radius: 31px" :src="userInfo.image
                  ? userInfo.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " @click="toAgent(tHouseInfo)" />
                <span @click="toAgent(tHouseInfo)">{{
                  userInfo.nikeName || "未命名用户"
                }}</span>
                <span class="biaoqin" style="cursor: pointer; max-width: 100px" @click="shopdetails(tHouseInfo)">{{
                  tHouseInfo.shopName || "个人房源" }}</span>
                <div class="vip-level" :style="{
                  backgroundColor:
                    $store.state.colors[userInfo.memberLevel - 1].bgColor,
                  color:
                    $store.state.colors[userInfo.memberLevel - 1].wordColor,
                  borderColor:
                    $store.state.colors[userInfo.memberLevel - 1].lineColor,
                }">
                  {{ $store.state.colors[userInfo.memberLevel - 1].level }}
                </div>
              </div>
            </div>
            <div class="but">
              <div class="but_2" @click="chat">
                <img src="../../assets/weixin_b.png" alt />
                <p>在线聊天</p>
              </div>
              <div class="but_1" @click="mouseoverPhone">
                <img src="../../assets/dianhua_lan.png" alt />
                <p>{{ phonestate ? userInfo.phone : "拨打电话" }}</p>
              </div>
            </div>
          </div>

          <div class="saoma">
            <img class="saoma_img" @mouseenter="qrCode && $refs.popoverRef.doShow()"
              @mouseleave="$refs.popoverRef.doClose()" @click.stop="reGetQrCode()" slot="reference" :src="qrCode"
              @error.once="reGetQrCode()" alt="重新获取" v-if="qrCode" />
            <span class="saoma_span">扫码查看小程序内信息</span>
            <el-popover placement="bottom" ref="popoverRef" width="240px" trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
              <div style="width: 120px;height: 1px;" slot="reference"></div>
              <img style="width:240px;height: 240px;" :src="qrCode" alt="重新获取" />
            </el-popover>
          </div>
        </div>
      </div>
      <div class="xinxi">
        <div class="fangyuan">基础信息</div>
        <div class="guig">
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">户型：</span>
            <span>{{ tHouseInfo.houseType }}</span>
          </p>
          <p>
            <span style="color: #999999">面积：</span>
            <span>{{ tHouseInfo.area }}㎡</span>
          </p>
          <p v-if="tHouseInfo.type != 1">
            <span style="color: #999999">状态：</span>
            <span>{{ tHouseInfo.useStatus == 1 ? "闲置中" : "经营中" }}</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="tHouseInfo.area && tHouseInfo.type == 4">
            <span style="color: #999999">厂区面积：</span>
            <span>{{ tHouseInfo.area }}m²</span>
          </p>
          <p v-if="tHouseInfo.workshopArea && tHouseInfo.type == 4">
            <span style="color: #999999">车间面积：</span>
            <span>{{ tHouseInfo.workshopArea }}m²</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">装修：</span>
            <span>{{ tHouseInfo.renovation }}</span>
          </p>
          <p v-if="[1, 2, 3].indexOf(housetype) != -1">
            <span style="color: #999999">楼层：</span>
            <span>{{ tHouseInfo.floor }}</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">年代：</span>
            <span>{{ tHouseInfo.years }}</span>
          </p>
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">电梯：</span>
            <span>{{ tHouseInfo.elevator }}</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">朝向：</span>
            <span>{{ tHouseInfo.orientation }}</span>
          </p>
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">产权类型：</span>
            <span>{{ tHouseInfo.propertyType }}</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="[1].indexOf(housetype) != -1">
            <span style="color: #999999">房屋年限：</span>
            <span>{{ tHouseInfo.housingYears }}</span>
          </p>
        </div>
        <div class="guig">
          <p v-if="tHouseInfo.nature">
            <span style="color: #999999">性质：</span>
            {{ tHouseInfo.nature }}
          </p>
          <p v-if="limit">
            <span style="color: #999999">土地使用年限：</span>
            {{ limit }}年/共{{ limit1 }}年
          </p>
        </div>
      </div>
      <div class="jieshao">
        <div class="jies">房源介绍</div>
        <div class="li" v-html="tHouseInfo.houseIntroduce"></div>
      </div>
      <div class="jieshaoTu">
        <div class="litu" v-for="(item, index) in homeImgList" :key="item">
          <img :src="item" @click="showImg(index, homeImgList, houseImgList)" />
        </div>
        <div class="litu" v-for="(item, index) in houseImgList" :key="item">
          <img :src="item" @click="
            showImg(index + homeImgList.length, homeImgList, houseImgList)
            " />
        </div>
      </div>

      <div class="kfwz">
        <div class="jies">看房位置</div>
        <div id="containepic" style="width: 1200px; height: 400px"></div>
      </div>
      <p class="mzsm">
        {{ disclaimerContent }}
        <!-- 免责声明：帮帮同城旨在为广大用户提供更丰富的信息，但由于部分信息因时间、政策变化等因素，且信息审核会有滞后性，会导致部分信息更新不同步，与实际情况可能存在偏差，一切信息以发布方官宣为准。帮帮同城不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或任何责任。 -->
      </p>
    </div>
    <floor></floor>
    <report ref="report" :bUserId="userInfo.id"></report>
    <chat ref="chats"></chat>
    <el-dialog title="违规信息" :visible.sync="centerDialogVisible" width="30%" center>
      <div style="height: 500px; overflow-y: scroll">
        <div class="informationMessage" v-for="(i, j) in informationList" :key="j">
          <div style="color: #aaa">
            举报房源：<span style="color: #000">{{ i.title }}</span>
          </div>
          <div style="color: #aaa">
            举报原因：<span style="color: #000">{{
              i.reportType + "(" + i.reportContent + ")"
            }}</span>
          </div>
          <div style="color: #aaa">
            举报时间：<span style="color: #000">{{ i.createDate }}</span>
          </div>
          <div style="color: #aaa">
            举报图片：
            <div>
              <el-image style="width: 100px; height: 100px" :src="item" fit="contain" :preview-src-list="i.image"
                v-for="(item, index) in i.image" :key="index"></el-image>
            </div>
          </div>
        </div>
      </div>
      <!-- <div style="display:flex;justify-content:center;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="informationTatol"
            :page-size=3
            :current-change="informationpageNo"
            @current-change="informationChange"
          >
          </el-pagination>
        </div> -->
    </el-dialog>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import report from "../../components/report.vue";
import collect from "../../components/collect.vue";
import chat from "../../components/chat.vue";
import tools from "../../components/tools.vue";
import bbczDoorSeen from "../index/comp/bbcz-door-seen.vue";
export default {
  components: {
    floor,
    heads,
    report,
    collect,
    chat,
    tools,
    bbczDoorSeen,
  },
  data() {
    return {
      chatid: "",
      checkedCities: [],
      tHouseInfo: {},
      userInfo: {},
      homeImgList: [],
      houseImgList: [],
      Img: { type: "", url: "" },

      ImgList: [],
      thisImg: 0,
      videostate: false,
      isCollection: 0,
      phonestate: false,
      searchtext: "",
      previewList: [],
      housetype: 1,
      limit: "",
      limit1: "",
      weig: false,
      Count: "",
      centerDialogVisible: false,
      informationList: [],
      doorSeen: false,
      // informationpageNo:1,
      // informationTatol:0
      remarks: "",
      vehicleImage: [],
      yiru: "",
      qrCode: "",
      shareUserInfo: {},
      indexs: "1",
      // 判断上门看看还是上门看过
      smkg_chage: false,
    };
  },
  created() {
    console.log("previewList", this.previewList);
    this.init();
    //回到顶部
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);

    this.getDisclaimers(4);
  },
  mounted() {
    this.doorSeenLsjl();
  },
  watch: {
    "$route.query.id": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.init();
        }
        //判断newVal有没有值监听路由变化
      },
    },
  },
  methods: {
			// 获取上门看过历史记录
    doorSeenLsjl(){
      let user = JSON.parse(localStorage.getItem("userInfo"));
      this.$getHttp("/mob/iteration/queryHouseVisitedHistory", {
          userId: user.id,
          houseId:this.$route.query.id,
      }).then(res => {
        if(res.visitedHistory.id){
          // 判断是上门看看还是看过
          this.smkg_chage=true
        }
      });
    },
    reGetQrCode() {
      // console.log('reGetQrCode');
      var url = "pages_houses/housing/used/houseDetails";

      this.$postHttp("/api/mobile/public/generateAppletQRCode", {
        id: this.$route.query.id,
        url,
      }).then((data) => {
        console.log(data);
        this.qrCode = data.imagePath;
        // console.log(data.imagePath);
      });
    },

    doorSeenClick() {
      if (!this.loginstate) {
        this.myErrorMessage("请先登录！");
      } else {
        this.doorSeen = !this.doorSeen;
      }
    },
    // 判断是否有违规
    getCount(id) {
      let that = this;
      this.$getHttp("/mob/user/getReportMyRecord", {
        userId: id,
      }).then((res) => {
        this.Count = res.page.count;
        if (this.Count > 0) {
          that.weig = true;
          setTimeout(() => {
            that.weig = false;
          }, 3000);
        }
      });
    },
    weigui() {
      // this.openUrl({
      //   path: "/my/inform",
      // });
      this.reportInformation();
      this.centerDialogVisible = true;
    },
    // 获取举报信息
    reportInformation() {
      this.$getHttp("/mob/user/getReportMyRecord", {
        pageSize: 1000,
        pageNo: 1,
        userId: this.userInfo.id,
      }).then((res) => {
        res.page.list.forEach((el) => {
          if (el.image) {
            el.image = el.image.split("|");
          }
        });
        this.informationList = res.page.list;
        // this.informationTatol = res.page.count
      });
    },
    // informationChange(e){
    //    this.informationpageNo = e;
    //   this.reportInformation();
    // },
    showImg(index, ImgList, ImgList2) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: [...ImgList, ...ImgList2],
      });
    },
    init() {
      this.getHouseInfoDetail(this.$route.query.id);
      this.getUser();
    },
    initMap() {
      var that = this;
      var center = new qq.maps.LatLng(
        that.tHouseInfo.latitude,
        that.tHouseInfo.longitude
      );
      var map = new qq.maps.Map(document.getElementById("containepic"), {
        center: center,
        zoom: 13,
        disableDefaultUI: true,
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map,
      });
      //that.markersArray.push(marker);
      var infoWin = new qq.maps.InfoWindow({
        map: map,
      });
    },
    //判断用户是否登录，如果登录则查询是否收藏
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.$getHttp("/mob/user/getIsCollection", {
          userId: user.id,
          cbType: 1,
          type: 1,
          relationId: this.$route.query.id,
        }).then((data) => {
          if (data.code == 200) {
            this.isCollection = data.isCollection;
          }
        });
        this.$postHttp("/mob/user/saveUserCollection", {
          userId: user.id,
          type: 2,
          cbType: 1,
          relationId: this.$route.query.id,
        }).then((data) => { });
      } else {
        this.loginstate = false;
      }
    },
    getHouseInfoDetail(id) {
      this.$getHttp("/mob/home/getHouseInfoDetail", {
        id: id,
      }).then((data) => {
        if (data.code == 200) {
          this.getCount(data.tHouseInfo.userId);
          if (!data.tHouseInfo.hasOwnProperty("shopName")) {
            data.tHouseInfo.shopName = "个人房源";
          }
          if (data.tHouseInfo.houseIntroduce) {

            data.tHouseInfo.houseIntroduce = this.replaceN(data.tHouseInfo.houseIntroduce)
          }
          // if (data.tHouseInfo.houseIntroduce.length > 0 && !data.tHouseInfo.houseIntroduce.split(
          // 	'.')[0] == '') {
          // 	//var troduce = data.tHouseInfo.houseIntroduce.split('.')
          // 	data.tHouseInfo.houseIntroduceList = data.tHouseInfo.houseIntroduce.split('。')
          // }
          // if(data.tHouseInfo.hasOwnProperty('floor')){
          // 	data.tHouseInfo.foors = this.floor(data.tHouseInfo.floor)
          // 	data.tHouseInfo.foorstr = this.floortr(data.tHouseInfo.floor.split(',')[1])
          // data.tHouseInfo.foors=data.tHouseInfo.floor
          // }
          if (data.tHouseInfo.hasOwnProperty("floor")) {
            if (data.tHouseInfo.floor.indexOf("|") == -1) {
              data.tHouseInfo.floor = "";
            } else {
              data.tHouseInfo.floor =
                data.tHouseInfo.floor.split("|")[0] +
                "层/" +
                "共" +
                data.tHouseInfo.floor.split("|")[1] +
                "层";
            }
          }
          // if (data.tHouseInfo.floor) {
          //   if (data.tHouseInfo.floor.indexOf("|") == -1) {
          //     if (data.tHouseInfo.floor.indexOf(",") == -1) {
          //       data.tHouseInfo.floor = "";
          //     } else {
          //       data.tHouseInfo.floor =
          //         data.tHouseInfo.floor.split(",")[0] +
          //         "层/" +
          //         "共" +
          //         data.tHouseInfo.floor.split(",")[1] +
          //         "层";
          //     }
          //   } else {
          //     data.tHouseInfo.floor =
          //       data.tHouseInfo.floor.split("|")[0] +
          //       "层/" +
          //       "共" +
          //       data.tHouseInfo.floor.split("|")[1] +
          //       "层";
          //   }
          // }
          // 初始化
          this.previewList = [];
          this.ImgList = [];
          console.log(data.tHouseInfo.floor, "楼层");
          this.homeImgList = this.manageImg(data.tHouseInfo.houseImage);
          this.manageImg(data.tHouseInfo.houseImage).forEach((e) => {
            this.previewList.push(e);
            this.ImgList.push({
              type: "homeImg",
              url: this.$img + e,
            });
          });
          if ([1, 4, 5, 6].indexOf(Number(data.tHouseInfo.type)) != -1) {
            this.manageImg(data.tHouseInfo.houseTypeImage).forEach((e) => {
              this.previewList.push(e);
              this.ImgList.push({
                type: "houseImgList",
                url: this.$img + e,
              });
              this.houseImgList = this.manageImg(
                data.tHouseInfo.houseTypeImage
              );
            });
          }
          console.log("this.previewList", this.previewList);
          this.housetype = Number(data.tHouseInfo.type);
          if (data.tHouseInfo.useTerm) {
            let useTerm = data.tHouseInfo.useTerm.split(",");
            this.limit = useTerm[0];
            this.limit1 = useTerm[1];
          }

          this.Img = this.ImgList[0];
          this.shareUserInfo = data.shareUserInfo;
          this.tHouseInfo = data.tHouseInfo;
          this.userInfo = data.userInfo;
          setTimeout(() => {
            this.initMap();
          }, 2000);

          console.log("thisImgImgImgImg", this.Img);

          var url = "pages_houses/housing/used/houseDetails";
          if (this.qrCode == "") {
            this.$postHttp("/api/mobile/public/generateAppletQRCode", {
              id,
              url,
            }).then((data) => {
              console.log(data);
              this.qrCode = data.imagePath;
              // console.log(data.imagePath);
            });
          }
        }
      });
    },
    toAgent(item) {
      // if (!item.shopId) {
      //   this.openUrl({
      //     path: "/index/userDetail",
      //     query: {
      //       id: item.userId
      //     }
      //   });
      //   return;
      // }
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: item.userId,
        },
      });
    },
    //开启聊天
    chat() {
      console.log(this.loginstate);
      if (this.loginstate) {
        this.$refs.chats.chatOpne(
          this.userInfo.id,
          this.tHouseInfo.id,
          this.indexs
        );
        if (this.indexs == 1) {
          this.indexs = 2;
        }
      } else {
        this.$message({
          message: "请登录之后在聊天！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    mouseoverPhone() {
      if (this.loginstate) {
        this.phonestate = !this.phonestate;
        // this.insertCallRecord({
        //   userId:this.tHouseInfo.id,
        //   phone:this.tHouseInfo.phone,
        //   businessType:1,
        //   callType:4
        // })
        this.phonestate && this.$postHttp("/mob/user/call", {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          telephoneNumber: this.tHouseInfo.phone,
          associationId: this.tHouseInfo.id,
          type: "4",
        }).then((res) => { });
      } else {
        this.$message({
          message: "请登录之后在查看电话！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    //处理楼层信息
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋共" + fool[1] + "层";
    },
    floortr(a) {
      if (a < 4) {
        return "底层";
      } else if (a > 3 && a < 7) {
        return "多层";
      } else if (a > 6 && a < 11) {
        return "小高层";
      } else if (a > 10 && a < 31) {
        return "高层";
      } else if (a > 30) {
        return "超高层";
      }
    },
    search() {
      this.openUrl({
        path: "/index/houseSearch",
        query: {
          search: this.searchtext,
        },
      });
    },
    //跳转
    toPush(type, old) {
      if (type == 2) {
        this.openUrl({
          path: "/index/newHouse",
          query: {
            transactionType: type,
            newOld: old,
          },
        });
      } else if (type == 1) {
        this.openUrl({
          path: "/index/lease",
          query: {
            transactionType: type,
          },
        });
      }
    },
    jubaoClick() {
      this.$refs.report.jubaoGuan(this.$route.query.id);
    },
    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    },
    //切换图片
    cutImg(type) {
      // console.log(type);
      if (type == 0) {
        if (this.thisImg > 0) {
          this.Img = this.ImgList[this.thisImg - 1];
          this.thisImg = this.thisImg - 1;
        } else {
          this.$message({
            message: "已经是第一张了哦！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      } else {
        if (
          this.thisImg < this.ImgList.length &&
          this.ImgList.length - this.thisImg > 1
        ) {
          this.Img = this.ImgList[this.thisImg + 1];
          this.thisImg = this.thisImg + 1;
        } else {
          this.$message({
            message: "已经是最后一张了哦！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      }
    },
    //点击播放小图
    buttonPlay(type) {
      if (type == 1) {
        this.Img = {
          type: "video",
        };
      } else if (type == 2) {
        this.Img = this.ImgList[0];
        this.thisImg = 0;
      } else if (type == 3) {
        this.Img = this.ImgList[this.homeImgList.length];
        this.thisImg = this.homeImgList.length;
      }
    },
    shopdetails(item) {
      if (item.shopName == "个人房源") {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {
        this.openUrl({
          path: "/index/ShopDetails",
          query: {
            id: item.shopId,
          },
        });
      }
    },
    addIntegral(val, title) {
      this.$postHttp("/mob/iteration/addIntegral", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ruleNumber: val,
        title: title,
      }).then((res) => { });
    },
    //收藏取消房源
    collect(type) {
      if (this.loginstate) {
        if (type == 1) {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 1,
            relationId: this.$route.query.id,
          }).then((data) => {
            if (data.code == 200) {
              this.isCollection = 1;
              this.$message({
                message: "收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
              this.addIntegral(5, "收藏房源");
            }
          });
        } else {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 1,
            relationId: this.$route.query.id,
            cancel: 1,
          }).then((data) => {
            if (data.code == 200) {
              this.isCollection = 0;
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请登录之后在收藏房源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    immigration(id) {
      this.yiru = "yiru" + id;
    },
    shiftOut() {
      this.yiru = "";
    },
    // 判断文件格式
    houseChage(file, fileLists) {
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg", "gif"]; //限制的文件类型，根据情况自己定义
      // 1为图片，2为视频
      if (suffixArray.indexOf(suffix.toLowerCase()) == -1) {
        this.typegs = 2;
      } else {
        this.typegs = 1;
      }
    },
    beforeUpload(file, fileList) {
      if (file.size / (1024 * 1024) > 20) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于20M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "jpg",
        "png",
        "jpeg",
        "gif",
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb",
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
    houseSuccess(response, file, fileList) {
      this.vehicleImage.push({
        id: file.uid,
        path: response.data[0].url,
        type: this.typegs,
      });
      console.log(this.vehicleImage);
    },
    houseRemove(file, fileList) {
      for (var i = 0; i < this.vehicleImage.length; i++) {
        if (this.vehicleImage[i].id == file.id) {
          this.vehicleImage.splice(i, 1);
        }
      }
    },
    submitSave() {
      if (this.remarks.trim() == "") {
        this.$message({
          message: "请填写上门记录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      var recordPicture = [];
      var recordVideo = [];
      this.vehicleImage.map((item) => {
        if (item.type == 2) {
          recordVideo.push(item.path);
        } else {
          recordPicture.push(item.path);
        }
      });
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.$postHttp("/mob/iteration/releaseHouseVisited", {
          noteTaker: user.id,
          recordHouse: this.$route.query.id,
          recordDescription: this.remarks,
          recordPicture: recordPicture.join("|"),
          recordVideo: recordVideo.join("|"),
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "提交成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });
            this.doorSeenClick();
          }
        });
      } else {
        this.$message({
          message: "请先登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.saoma {
  // position: absolute;
  // right: 20px;
  // top: 466px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .saoma_img {
    width: 90px;
    height: 90px;
    margin-bottom: 6px;
  }

  .saoma_span {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
  overflow: hidden;
}

.informationMessage {
  border: 1px solid #aaa;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.mzsm {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
  width: 97%;
  margin-top: 15px;
  margin-bottom: 30px;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);

  .jubao {
    position: absolute;
    box-sizing: border-box;
    width: 450px;
    height: 624px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding-left: 43px;
    border-radius: 6px;
    overflow-y: auto;

    .guan {
      position: absolute;
      top: 5px;
      right: 5px;
      color: #666;
      cursor: pointer;
      border: 1px solid #666;
      border-radius: 50%;
      width: 16px;
      height: 16px;
    }

    .p1 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-top: 32px;
    }

    .list {
      .li {
        margin-top: 16px;

        span {
          font-size: 16px;
          color: #333;
          vertical-align: middle;
          margin-left: 12px;
        }
      }
    }

    .tu {
      position: relative;
      margin-top: 13px;
      width: 100%;
      font-size: 18px;

      .el-textarea {
        font-size: 18px;
      }

      .textarea {
        /deep/.el-textarea__inner {
          width: 356px;
          min-height: 80px !important;
          line-height: 25px;
          outline: none;
          padding: 10px 13px 30px 13px;
          overflow-y: visible;
        }
      }

      .zi {
        position: absolute;
        font-size: 14px;
        z-index: 99;
        right: 60px;
        bottom: 10px;
        color: #999999;
      }
    }

    .shuoming {
      font-size: 14px;
      color: #666666;
      margin-top: 35px;
      margin-bottom: 15px;

      p {
        display: inline-block;
        width: 340px;

        span {
          color: #64b6a8;
          cursor: pointer;
        }
      }

      .el-checkbox {
        vertical-align: top;
        margin-left: 16px;
      }

      /deep/.el-checkbox__inner {
        width: 15px;
        height: 15px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 3px;
        height: 7px;
        left: 4px;
        top: 1px;
        border-left: 0;
        border-top: 0;
      }
    }

    .jubao_but {
      width: 365px;
      height: 44px;
      line-height: 44px;
      border-radius: 22px;
      text-align: center;
      margin-left: 50%;
      transform: translateX(-50%);
      background: #64b6a8;
      margin-bottom: 30px;
    }

    .el-checkbox {
      vertical-align: middle;
      margin-left: 16px;
    }

    /deep/.el-checkbox__inner {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }

    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      width: 6px;
      height: 12px;
      left: 7px;
      top: 3px;
      border-left: 0;
      border-top: 0;
    }

    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #64b6a8;
      border-color: #64b6a8;
    }
  }
}

.particulars {
  position: relative;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;

  .name {
    font-size: 28px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 21px;
  }

  .jubao {
    position: absolute;
    top: -10px;
    right: 20px;
    display: inline-block;
    // margin-right: 28px;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
    }
  }

  .tu {
    display: inline-block;
    vertical-align: top;
    margin-top: 40px;

    .datu {
      position: relative;
      width: 600px;
      height: 400px;

      img {
        width: 600px;
        height: 400px;
      }

      .zuo {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        left: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-left:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }

      .you {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        right: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-right:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }
    }

    .xiaotu {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-top: 24px;
      margin-right: 26px;
      width: 180px;
      height: 120px;
      cursor: pointer;
      text-align: center;

      img {
        /* width: 180px;
        height: 120px; */
        height: 100%;
        width: 100%;
        object-fit: contain;
      }

      p {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background: rgba(51, 51, 51, 0.2);
      }

      .tuXuan {
        background-color: #64b6a8;
      }
    }

    .xiaotu:nth-child(4) {
      margin-right: 0px;
    }
  }

  .wenz {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 520px;
    height: 542px;
    background: #ffffff;
    // border: 1px solid #e0e0e0;
    margin-left: 24px;
    padding: 0 24px;

    .but {
      margin-top: 26px;

      div {
        position: relative;
        display: inline-block;
        //width: 153px;
        height: 51px;
        border-radius: 4px;
        overflow: hidden;
        text-align: center;
        line-height: 51px;
        text-indent: 50px;
        color: #fff;
        margin-right: 15px;

        img {
          position: absolute;
          width: 33px;
          height: 33px;
          top: 9px;
          left: 25px;
        }
      }

      p {
        margin-left: 10px;
      }

      .but_1 {
        cursor: pointer;
        padding-right: 20px;
        background: rgba(100, 182, 168, 0.14);
        color: #64b6a8;
      }

      .but_2 {
        cursor: pointer;
        padding-right: 20px;
        background: #64b6a8;
      }
    }

    .diz {
      padding: 24px 0;
      border-bottom: 1px solid #e0e0e0;

      div {
        margin-bottom: 22px;

        img {
          width: 28px;
          height: 28px;
        }
      }
    }

    .qian {
      padding-bottom: 36px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;

      align-items: flex-end;

      .p {
        font-size: 32px;
        color: #e00000;
      }

      div {
        img {
          width: 30px;
          height: 30px;
        }
      }

      div:nth-child(4) {
        margin-right: 0;
      }
    }

    .huxin {
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 30px;

      div {
        margin-top: 30px;
        display: inline-block;

        .p1 {
          font-size: 26px;
          color: #333;
          margin-bottom: 8px;
        }

        .p2 {
          font-size: 16px;
          color: #666;
        }
      }
    }

    .mingpai {
      margin-top: 24px;
      position: relative;

      .weigui {
        position: absolute;
        padding: 0px 10px 0px 10px;
        width: 300px;
        left: 7px;
        bottom: 55px;
        // animation: all 6s;
        // animation-name: mycolor;

        // mycolor 2s linear 3s infinite alternate
        .img {
          width: 100%;
          height: 134rpx;
        }

        p {
          position: absolute;
          left: 50px;
          bottom: 18px;
          font-size: 16px;
          color: #fff;
        }
      }

      div {
        img {
          cursor: pointer;
          width: 48px;
          height: 48px;
          margin-right: 14px;
        }

        span {
          cursor: pointer;
          display: inline-block;
          vertical-align: middle;
          font-size: 18px;
          color: #333333;
          margin-right: 14px;
          max-width: 100px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .biaoqin {
          padding: 2px 5px;
          max-width: 200px;
          height: 24px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 24px;
          font-size: 14px;
          color: #64b6a8;
        }
      }
    }
  }

  .xinxi {
    margin-top: 70px;

    .fangyuan {
      font-size: 24px;
      color: #333333;
      margin-bottom: 18px;
    }

    .guig {
      margin-bottom: 15px;

      p {
        display: inline-block;
        width: 290px;
        font-size: 20px;
      }
    }
  }

  .jiaju {
    margin-top: 40px;

    .dianqi {
      font-size: 24px;
      color: #333333;
    }

    .list {
      .li {
        display: inline-block;
        margin-top: 24px;
        margin-right: 30px;

        .el-checkbox {
          vertical-align: middle;
        }

        /deep/.el-checkbox__inner {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }

        /deep/.el-checkbox__inner::after {
          border: 2px solid #fff;
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
        /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        div {
          display: inline-block;

          img {
            width: 40px;
            height: 40px;
          }

          span {
            display: inline-block;
            vertical-align: middle;
            width: 70px;
            font-size: 16px;
            color: #000000;
          }
        }
      }

      .li:last-child {
        margin-right: 0px;
      }
    }
  }

  .jieshao {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
    }

    .li {
      margin-bottom: 8px;
      font-size: 20px;
    }
  }
}

.tit {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      width: 400px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      vertical-align: middle;

      input {
        width: 320px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }
  }
}

/deep/.el-checkbox__label {
  display: none;
}

/deep/.el-image-viewer__img {
  object-fit: contain;
}

.jieshaoTu {
  width: 100%;
  //  height: 350px;
  margin-bottom: 20px;
  overflow: hidden;

  .litu {
    width: 350px;
    height: 350px;
    float: left;
    margin-right: 50px;
    margin-bottom: 50px;

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      background-color: #00000033;
    }
  }
}


.kcwz {
  margin-top: 40px;
  margin-bottom: 48px;

  .jies {
    font-size: 24px;
    color: #000000;
    margin-bottom: 17px;
  }
}

.vip-level {
  width: 80px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid;
  border-radius: 4px 4px 4px 4px;
}

.doorSeen {
  margin-bottom: 40px;

  .doorSeen_title {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 18px;
  }

  .doorSeen_center {
    box-sizing: border-box;
    width: 1200px;
    // height: 262px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 27px;
    display: flex;

    .left {
      width: 1000px;

      .left_input {
        width: 100%;
        height: 58px;
        border-bottom: 1px solid #e0e0e0;
        color: #999;
      }

      .left_tu {
        margin-top: 10px;

        .zhanshi {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .zhanshi_item {
            width: 150px;
            height: 150px;
            position: relative;
            margin-right: 20px;
            margin-bottom: 10px;
            transition: all 0.5s;

            .zhanshi_item_zz {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.7);
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }

        .kg {
          width: 150px;
          height: 150px;
          border: 1px solid #e0e0e0;
          text-align: center;
          line-height: 150px;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      align-items: flex-end;

      // justify-content: flex-end;
      .btn_bc {
        width: 80px;
        height: 50px;
        background-color: #64b6a8;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        margin-right: 10px;
      }

      .btn_qx {
        width: 80px;
        height: 50px;
        border: 1px solid #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }
}
</style>
